<template>

  <div>
    <div class="header">
      <!-- 头部搜索 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="left"
      background="#4bd863"
      left-icon="none"
      right-icon="search"
      show-action
      @focus="toSearch"
    >
      <template v-slot:left>
        <div @click="positionClick" class="location">
          <van-icon name="location" size="1.2rem" color="white" />
          <span style="color: #fff; font-size: 14px">西安</span>
        </div>
      </template>
      <template v-slot:action>
        <van-icon @click="toMessage" name="chat" size="1.8rem" color="white" />
      </template>
    </van-search>
    </div>

    <div class="content">
      <van-row>
        <van-col :span="6" class="aside">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item title="夏季水果"  to="/category" />
            <van-sidebar-item title="秋季水果" to="/category/autumn" />
            <van-sidebar-item title="冬季水果" to="/category/winter" />
            <van-sidebar-item title="春季水果" to="/category/spring" />
          </van-sidebar>
        </van-col>
        <van-col :span="18" class="main">
          <router-view></router-view>
        </van-col>
      </van-row>
    </div>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import mainTabBar from "../../components/mainTabBar";
export default {
  name: "category",
  data() {
    return {
       value: "",
      activeKey: 0,
    };
  },
  methods:{
    // 跳转至搜索页面
    toSearch(){
      
       this.$router.push("/search");
    },
    //跳转到mesage
    toMessage(){
      this.$router.push("/message");
    },
    positionClick(){
      this.$router.push("/position");
    },
  },
  components:{
    mainTabBar,
  }
};
</script>

<style scoped>
.location {
  margin-right: 0.625rem;
}
</style>
